<template>
   <div class="mb-select van-cell van-cell-clear" v-show="visible">
    <van-cell 
      :title="title" 
      is-link 
      :value="value || placeholder" 
      :required="required" 
      :value-class="valueClass" 
      @click="pickerClick"
    >
    </van-cell>
    <van-popup 
      v-model="showPopup" 
      position="bottom" 
    >
      <van-datetime-picker
        v-model="currentDate"
        :type="type"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="onConfirm"
        @cancel="onCancel"
      />
    </van-popup>
  </div>
</template>

<script>
export default {
  name: 'mb-datetime-picker',
  data() {
    return {
      visible: true,
      showPopup: false,
      value: '',
      placeholder: "请选择",
      minDate: new Date(1900, 0, 1),
      maxDate: new Date(2099, 0, 1),
      currentDate: new Date(),
      error: false
    }
  },
  props: ['item','result'],
  computed: {
    title() {
      return this.item.caption || this.item.name || ''
    },
    required() {
      return this.item.required
    },
    valueClass() {
      return this.value != null && this.value != '' ? 'selected' : (this.error ? 'required': '')
    },
    type() {
      if(!this.item.format) return 'date';
      let type;
      if(/(\w)(y|Y){2,4}/.test(this.item.format) && /MM/.test(this.item.format) && /dd|DD/.test(this.item.format) && /hh:mm/.test(this.item.format.toLowerCase())){
        type = 'datetime';
      } else if(/(\w)(y|Y){2,4}/.test(this.item.format) && /MM/.test(this.item.format) && /dd|DD/.test(this.item.format)) {
        type = 'date'
      } else if(/(\w)(y|Y){2,4}/.test(this.item.format) && /MM/.test(this.item.format)){
        type = 'year-month'
      } else if (/hh:ss/.test(this.item.format)) {
        type = 'time'
      } else {
        type = 'date'
      }
      return type
    }
  },
  watch: {
    value: function(newVal) {
      let emitObj = {};
      emitObj[this.item.name] = newVal;
      this.$emit("formChange", this.item.name, emitObj, this.item)
    },
  },
  methods: {
    pickerClick() {
      this.showPopup = true;
    },
    onConfirm(time) {
      this.error = false;
      this.showPopup = false;
      this.value = this.getFormatTime(this.item.format, time);
    },
    onCancel() {
      this.showPopup = false;
    },
    getFormatTime(format, time) {
      format = format || 'YYYY-MM-DD hh:mm';
      [
        { test: /(\w)(y|Y){2,4}/g, text: time.getFullYear() },
        { test: /MM/g, text: time.getMonth() + 1 },
        { test: /dd|DD/g, text: time.getDate() },
        { test: /hh|HH/g, text: time.getHours() },
        { test: /mm/g, text: time.getMinutes() },
        { test: /ss/g, text: 0 }
      ].forEach(e => {
        format = format.replace(e['test'], (e.text < 10 ? '0' + e.text : e.text))
      });
      return format;
    },
    validate() {
      if(!this.visible) return true
      if(this.item.required && this.value === '') {
        this.error = true;
        return false
      }
      return true
    }
  },
  mounted() {
    let emitObj = {};
    emitObj[this.item.name] = this.result;
    this.$emit("formChange", this.item.name, emitObj, this.item);
  }
}
</script>
